require(['config'],()=>{
    require(['jquery','paging','pAjax','header','footer'],()=>{
    
        class List{
            constructor(){
                this.ul = document.querySelector('.ul')
                this.init()
            }
            init(){
                this.request()
                // this.totalNum()
            }
            request(){
                pAjax({url: '/api/goods.json'})
                .then(data=>{
                    let res = JSON.parse(data)
                    res = res.slice(40, 80)
                    this.render(res)
                    this.text(res)
                   
                })
    
              
    
            }
            render(data){
                data.forEach(item=>{
                    this.ul.innerHTML += `
                    <li>
                        <a href="/html/detail.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                        <div class="pic">
                            <img src="${item.img_small_logo}">
                        </div>
                        <p class="title hide">${item.title}</p>
                        </a>
                        <p class="price">${item.price}</p>
                        <button data-id=${item.goods_id}>加入购物车</button>
                    </li> 
                    `
                })
                $(".ul").paging({
                    PageNum: 8, //每页显示数目
                    pageMax: true, //按钮长度是否显示
                    pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
                    pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
                    pageInput: true, //是否使用文本框输入跳转
                    pagingBtnHide: false, //是否让按钮变为一个
                    pagingBtnPaging: true, //按钮是否分页
                    pagingDisplay: "flex" //显示的属性，弹性盒子还是块化
                })
                // this.bindHtml(data)
               
                // console.log(data);
            }
            text(res){
                // console.log(res);
                $('button').on('click',function(e){
                    /* localStorage中获取商品列表 */
                    let target = e.target || e.srcElement
                  let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
                  let user = JSON.parse(localStorage.getItem('user-Message'))
                  //在添加数据之前判断购物车中是否有此商品存在，如果存在数量加1，如果不存在则添加
                  let oldProduct = productList.find(item => item.id == res.goods_id)
                  //获取对应点击按钮的id
                  let id = target.dataset.id - 0
                  console.log(id);
                  //通过对比拿到数据
                  let goods = res.find(item=>{return item.goods_id == id})
                  console.log(goods);
                //   console.log(oldProduct);
                  if (user) {
                    if (oldProduct) {
                      oldProduct.num++
                    } else {
                      /* 创建数组 */
                      let cartProdcut = {
                        id: goods.goods_id,
                        url: goods.img_small_logo, //商品图片
                        name: goods.title, //商品名称
                        price: goods.price, //价格
                        num: 1, //商品数量
                        state: false, //状态
                      }
                      productList.push(cartProdcut)
                    }
                    //将购车列表内容存储在localStorage中
                    localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
                    alert('添加成功，去购物车看看吧！')
                  } else {
                    alert('请先登录哦！')
                    location.href = '/html/login.html'
                  }
                })
                
                }
        }
    
        new List()
    
    })
    
    })